<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <style>
        .star{position:relative;width:600px;margin:20px auto;height:24px;}
        .star ul,.star span{float:left;display:inline;height:19px;line-height:19px;}
        .star ul{margin:0 10px;}
        .star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(../../myImage/star.png) no-repeat;}
        .star strong{color:#f60;padding-left:0px;}
        .star li.on{background-position:0 -28px;}
        .star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(../../myImage/icon.gif) no-repeat;padding:7px 10px 0;}
        .star p em{color:#f60;display:block;font-style:normal;}
    </style>
</head>
<body >
<header class="aui-bar aui-bar-nav" id="aui-header">
    <a class="aui-btn aui-pull-left" tapmode onclick="history.back();">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">评价</div>
    <div class="aui-btn aui-pull-right" style="font-size: 14px" onclick="submit()"> 发布</div>

</header>
<section class="aui-content" style="margin-top: 45px">
    <div class="aui-card-list">
        <div class="aui-card-list-header aui-card-list-user aui-border-b" >
            <div class="aui-card-list-user-avatar" >
                <img id="demandHeadPortraitUrl" class="aui-img-round" />
            </div>
            <div style="padding: 10px 0 0 0" id="demandNickname"></div>
            <div id="star1" class="star">
                <span>总体评价</span>
                <ul>
                    <li><a href="javascript:;">1</a></li>
                    <li><a href="javascript:;">2</a></li>
                    <li><a href="javascript:;">3</a></li>
                    <li><a href="javascript:;">4</a></li>
                    <li><a href="javascript:;">5</a></li>
                </ul>
                <span style="font-size: 13px"><strong id="num1"></strong></span>
                <p></p>
            </div>
            <ul class="aui-list aui-form-list line">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input"><textarea placeholder="谈谈那你对ta的看法吧！" id="ev1"></textarea>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</section>
<section class="aui-content" >
    <div class="aui-card-list">
        <div class="aui-card-list-header aui-card-list-user aui-border-b" >
            <div class="aui-card-list-user-avatar" >
                <img id="courierHeadPortraitUrl" class="aui-img-round" />
            </div>
            <div style="padding: 10px 0 0 0" id="courierNickname"></div>
            <div id="star2" class="star">
                <span>总体评价</span>
                <ul>
                    <li><a href="javascript:;">1</a></li>
                    <li><a href="javascript:;">2</a></li>
                    <li><a href="javascript:;">3</a></li>
                    <li><a href="javascript:;">4</a></li>
                    <li><a href="javascript:;">5</a></li>
                </ul>
                <span style="font-size: 13px"><strong id="num2"></strong></span>
                <p></p>
            </div>
            <ul class="aui-list aui-form-list line">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input"><textarea placeholder="谈谈那你对ta的看法吧！" id="ev2"></textarea>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</section>
<script type="text/javascript">

    function evaluate1(){
        var oStar = document.getElementById("star1");
        var aLi = oStar.getElementsByTagName("li");
        var oUl = oStar.getElementsByTagName("ul")[0];
        var oSpan = oStar.getElementsByTagName("strong")[0];
        var oP = oStar.getElementsByTagName("p")[0];
        var i = iScore = iStar = 0;
        var aMsg = ["非常差|非常差",
            "差|差",
            "一般|一般",
            "好|好",
            "非常好|非常好"
        ]
        for (i = 1; i <= aLi.length; i++){
            aLi[i - 1].index = i;
            //点击后进行评分处理
            aLi[i - 1].onclick = function (){
                fnPoint(this.index);
                iStar = this.index;
                oP.style.display = "none";
                oSpan.innerHTML = (this.index) + "分"
            }
        }
        //评分处理
        function fnPoint(iArg){
            //分数赋值
            iScore = iArg || iStar;
            for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
        }
    }
    function evaluate2(){
        var oStar = document.getElementById("star2");
        var aLi = oStar.getElementsByTagName("li");
        var oUl = oStar.getElementsByTagName("ul")[0];
        var oSpan = oStar.getElementsByTagName("strong")[0];
        var oP = oStar.getElementsByTagName("p")[0];
        var i = iScore = iStar = 0;
        var aMsg = ["非常差|非常差",
            "差|差",
            "一般|一般",
            "好|好",
            "非常好|非常好"
        ]
        for (i = 1; i <= aLi.length; i++){
            aLi[i - 1].index = i;
            //点击后进行评分处理
            aLi[i - 1].onclick = function (){
                fnPoint(this.index);
                iStar = this.index;
                oP.style.display = "none";
                oSpan.innerHTML = (this.index) + "分";
            }
        }
        //评分处理
        function fnPoint(iArg){
            //分数赋值
            iScore = iArg || iStar;
            for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
        }
    }
    window.onload = function (){
        evaluate1();
        evaluate2();
    };
</script>

<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script src="../../myJs/jquery.js"></script>
<script src="../../myJs/jquery.cookie.js"></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }
    var orderId;
     $(function(){
    	 orderId =sessionStorage.getItem("orderId");
           $.ajax({
         type: "post",
         url: '/randomdelivery/userDemandController/userCommentsPage',
         data: {
        	  orderId:orderId
         },
         datatype: "json",
         success: function (data) {
        	 alert(JSON.stringify(data));
        	 $("#courierNickname").html(data.msg.courierNickname);
        	 $("#demandNickname").html(data.msg.demandNickname);
        	 $("#demandHeadPortraitUrl").attr("src",data.msg.demandHeadPortraitUrl);
        	 $("#courierHeadPortraitUrl").attr("src",data.msg.courierHeadPortraitUrl);
         }

         });
       
    })

    function submit(){
        var ev1 = $("#ev1").val();
        var ev2 = $("#ev2").val();
        var num1 = $("#num1").text();
        var num2= $("#num2").text();
        alert(ev2);
        alert(num1);
        $.ajax({
            type: "post",
            url: '/randomdelivery/userPurchaseController/userPurchaseComments',
            data: { 
            orderId:orderId,
            demandScore:num1,
            demandComments:ev1,
            courierScore:ev2,
            courierComments:num2,
            },
            datatype: "json",
            success: function (data) {
            alert(JSON.stringify(data));
            location.href="receivedOrder.html";
            }
            });
    }
</script>
</body>
</html>